<template>
  <div id="order-list">
    <van-nav-bar title="我的订单" fixed left-arrow @click-left="onClickLeft" />
    <div :style="{ height: '45px' }"></div>
    <van-tabs v-model="active" sticky offset-top="45" @change="change">
      <van-tab title="全部">
        <div class="order-item" v-for="(item, index) in orderList" :key="index">
          <template v-for="(goods, idx) in item.goodsList">
            <van-card
              :key="idx"
              :num="goods.number"
              :price="goods.price + '.00'"
              :desc="goods.specifications[0]"
              :title="goods.goodsName"
              :thumb="goods.picUrl"
            >
            </van-card>
          </template>
          <template v-if="item.orderStatusText === '未付款'">
            <van-row>
              <van-col offset="15" span="9">
                <van-button
                  @touchend.native="cancelOrder(item, index)"
                  size="mini"
                  >取消订单</van-button
                >
                <van-button
                  type="danger"
                  size="mini"
                  @touchend.native="fastPay(item, index)"
                  >立即支付</van-button
                >
              </van-col>
            </van-row>
          </template>
          <template v-else-if="item.orderStatusText === '已付款'">
            <van-row>
              <van-col offset="19" span="5">
                <van-button
                  @touchend.native="orderRefund(item, index)"
                  :style="{ marginRight: '5px' }"
                  size="mini"
                  type="danger"
                  >立即退款</van-button
                >
               
              </van-col>
            </van-row>
          </template>
          <template v-else-if="item.orderStatusText === '已发货'">
            <van-row>
              <van-col offset="19" span="5">
                <van-button
                  @touchend.native="confirmOrder(item, index)"
                  size="mini"
                  >确认收货</van-button
                >
               
              </van-col>
            </van-row>
          </template>
          <template v-else-if="item.orderStatusText === '已收货'">
            <van-row>
              <van-col offset="19" span="5">
                <van-button
                  @touchend.native="evalItem(item, index)"
                  size="mini"
                  >立即评价</van-button
                >
               
              </van-col>
            </van-row>
          </template>
          <template v-else>
            <van-row>
              <van-col offset="17" span="7">
                <span class="status">{{item.orderStatusText}}</span>
              </van-col>
            </van-row>
          </template>
        </div>
      </van-tab>
      <van-tab title="待付款">
        <div
          class="order-item"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <template v-for="(goods, idx) in item.goodsList">
            <van-card
              :key="idx"
              :num="goods.number"
              :price="goods.price + '.00'"
              :desc="goods.specifications[0]"
              :title="goods.goodsName"
              :thumb="goods.picUrl"
            >
            </van-card>
          </template>
          <van-row>
            <van-col offset="15" span="9">
              <van-button
                @touchend.native="cancelOrder(item, index)"
                :style="{ marginRight: '5px' }"
                size="mini"
                >取消订单</van-button
              >
              <van-button
                type="danger"
                size="mini"
                @touchend.native="fastPay(item, index)"
                >立即支付</van-button
              >
            </van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="待发货">
        <div class="order-item" v-for="(item, index) in orderList" :key="index">
          <template v-for="(goods, idx) in item.goodsList">
            <van-card
              :key="idx"
              :num="goods.number"
              :price="goods.price + '.00'"
              :desc="goods.specifications[0]"
              :title="goods.goodsName"
              :thumb="goods.picUrl"
            >
            </van-card>
          </template>
          <van-row>
            <van-col offset="19" span="4">
              <van-button
                @touchend.native="orderRefund(item, index)"
                size="mini"
                >取消订单</van-button
              >
            </van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="待收货">
        <div
          class="order-item"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <template v-for="(goods, idx) in item.goodsList">
            <van-card
              :key="idx"
              :num="goods.number"
              :price="goods.price + '.00'"
              :desc="goods.specifications[0]"
              :title="goods.goodsName"
              :thumb="goods.picUrl"
            >
            </van-card>
          </template>
          <van-row>
            <van-col offset="19" span="4">
              <van-button
                @touchend.native="confirmOrder(item, index)"
                size="mini"
                >确认收货</van-button
              >
            </van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="待评价">
        <div class="order-item" v-for="(item, index) in orderList" :key="index">
          <template v-for="(goods, idx) in item.goodsList">
            <van-card
              :key="idx"
              :num="goods.number"
              :price="goods.price + '.00'"
              :desc="goods.specifications[0]"
              :title="goods.goodsName"
              :thumb="goods.picUrl"
            >
            </van-card>
          </template>
          <van-row>
            <van-col offset="19" span="4">
              <van-button @touchend.native="evalItem(item, index)" size="mini"
                >立即评价</van-button
              >
            </van-col>
          </van-row>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { NavBar, Tab, Tabs, Card, Button, Col, Row, Toast, Dialog } from "vant";
import {
  orderList,
  orderPay,
  closeOrder,
  refund,
  confirmGoods,
} from "@/network";
export default {
  name: "OrderList",
  data() {
    return {
      active: 0,
      orderList: [],
    
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Card.name]: Card,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Col.name]: Col,
    [Row.name]: Row,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,
  },
  methods: {
    onClickLeft() {
      // this.$router.back();
      this.$router.push({ name: "Profile" });
    },
    async getOrderList(showType = 0) {
      const {
        data: { data },
      } = await orderList({ showType }); //获取未付款的订单
      this.orderList = data.list;
    
    },
    //支付操作
    async fastPay(item, index) {
      //付款操作
      const info = {
        orderId: item.id,
      };
      const { data } = await orderPay(info);
      // console.log(res);
      if (data.errno === 0) {
        Toast.success("支付成功");
        this.orderList.splice(index, 1);
      }
    },
    //取消订单操作
    async cancelOrder(item, index) {
      const { data } = await closeOrder({ orderId: item.id });
      // console.log(res);
      if (data.errno === 0) {
        Toast.success("取消订单成功");
        this.orderList.splice(index, 1);
      }
    },
    //退款操作
    async orderRefund(item, index) {
      const { data } = await refund({ orderId: item.id });
      if (data.errno === 0) {
        Toast.success("退款成功");
        this.orderList.splice(index, 1);
      }
    },
    change(name, title) {
      this.getOrderList(name);
    },
    //确认收货
    confirmOrder(item, index) {
      Dialog.confirm({
        title: "确认已收到商品？",
      })
        .then(() => {
          // on confirm
          const info = {
            orderId: item.id,
          };
          // const { data } = await confirmGoods(info);
          confirmGoods(info).then(({ data }) => {
            if (data.errno === 0) {
              Toast.loading({
                message: "确认收货中...",
                forbidClick: true,
                duration: 800,
              });
              setTimeout(() => {
                Toast.success("收货完毕");
                this.orderList.splice(index, 1);
              }, 1300);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //立即评价
    evalItem(item, index) {
      // console.log(item);
      console.log(index);
      this.$router.push({
        name: "Comment",
        query: {
          item,
        },
      });
    },
  },
  created() {
    this.getOrderList(); //组件创建就直接获取订单列表
    const index = this.$route.query.index; //获取路由传参过来的索引
    if (typeof index !== "undefined") {
      //如果有索引就直接跳转到相对的标签页
      this.active = index;
    }
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
#order-list {
  background: rgb(228, 228, 228);
  min-height: 100vh;
}
.order-item {
  // margin-bottom: 30px;
  width: 93%;
  margin: 10px auto;
  padding: 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 15px;
  .van-card {
    background: #fff;
  }
}
.order-num {
  font-size: 14px;
}
.status {
  font-size: 12px;
  text-align: right;
}
</style>

